<template>
	<view :style="{ height: 50 +  CustomBar + 'px'}">
		<view class="cu-custom" :style="{ height: 50 +  CustomBar + 'px'}">
			<view class="cu-bar fixed" :style="[navStyle]"
			:class="[bgImage!=''?'none-bg text-white bg-img':'',
			bgClass,
			isGrayBg==true?'nav-bg-gray':'',
			isWhiteBg==true?'nav-bg-white':'',
			isGreenBg==true?'nav-bg-green':'']">
				<view class="action" @tap="backPage" v-if="isBack">
					<text class="cuIcon-back"></text>
            <u-icon name="arrow-left" size="32rpx"></u-icon>
					<slot name="backText"></slot>
				</view>
				<view class="left" :style="[{top:StatusBar + 'px'}]">
					<slot name="left"></slot>
				</view>
				<view class="content" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				<slot name="right" :style="[{top:StatusBar + 'px'}]"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: 0,
				CustomBar: 0
			};
		},
		name: 'cu-navbar',
		created() {
       if (uni.getStorageSync('device') === 'app') {
           this.CustomBar = 45;
       }
        return
        
			let that = this;
			uni.getSystemInfo({
				success: function(e) {
					// #ifndef MP
					that.StatusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						that.CustomBar = e.statusBarHeight + 50;
					} else {
						that.CustomBar = e.statusBarHeight + 45;
					};
					// #endif

					// #ifdef MP-WEIXIN || MP-TOUTIAO
					that.StatusBar = e.statusBarHeight;
					let custom = wx.getMenuButtonBoundingClientRect();
					that.Custom = custom;
					that.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
					// #endif

					// #ifdef MP-ALIPAY
					that.StatusBar = e.statusBarHeight;
					that.CustomBar = e.statusBarHeight + e.titleBarHeight;
					// #endif
				}
			})
		},
		props: {
			bgClass: {
				type: String,
				default: 'nav-bg-blue'
			},
			whitebgClass: {
				type: String,
				default: 'bg-white'
			},
			bgColor: {
				type: String,
				default: '#fa433f'
			},
			color: {
				type: String,
				default: '#fff'
			},
			bgLinear: {
				type: Array,
				default(){
					return [];
				}
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			isGrayBg: {
				type: [Boolean, String],
				default: false
			},
			isWhiteBg: {
				type: [Boolean, String],
				default: false
			},
			isGreenBg: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			}
		},
		computed: {
			navStyle() {
				var style = {
					height: `50px`,
				}
				if (this.bgImage) {
					style.backgroundImage = `url(${this.bgImage})`;
				}
				let len = this.bgLinear.length;
				if (!len) {
					if (this.bgColor) {
						style.backgroundColor = this.bgColor;
					}
				} else if (len == 3) {
					style.backgroundImage = `linear-gradient(${this.bgLinear[0]}deg, ${this.bgLinear[1]}, ${this.bgLinear[2]})`;
				}
				if (this.color) {
					style.color = this.color;
				}
				return style;
			}
		},
		methods: {
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.cu-custom {
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 28rpx;
    box-sizing: border-box;
    background-color: #fa433f;
  z-index: 9999999;
  width: 100%;
}
</style>
